<template>
  <view class="container">
    <view class="container-box">
      <message-search></message-search>
      <!-- 分类框 -->
      <view class="tab-box">
        <pending-tab ref="pendingTab" :tab-type="approvalTab" @pendupdate="getApprovalBytab"
          @pendSelect="getApprovalBytype"></pending-tab>
      </view>
    </view>
    <empty-state v-if="!isLoading && approvalList.length === 0" text="暂无审批记录"></empty-state>
    <approval-list :DataList="approvalList" :is-detail-show="isApprvalShow"></approval-list>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 获取pending-tab的不同样式
        approvalTab: 'approval',
        approvalList: [],
        total: 0,
        isLoading: false,
        isApprvalShow: false,
        queryObj: {
          page: 1,
          pageSize: 3,
          type: '',
          deptId: '',
          approvalStatus: 2,
          revokeStatus: '',
          extensionStatus: ''
        }
      };
    },
    onLoad(options) {
      this.getApprovalList()
    },
    onPullDownRefresh() {
      this.onRefresh()
    },
    onReachBottom() {
      if (this.queryObj.page * this.queryObj.pageSize >= this.total) return uni.$showMsg('数据加载完毕!!')
      if (this.isLoading) return
      this.queryObj.page += 1
      this.getApprovalList()
    },
    methods: {
      // 获取信息列表
      async getApprovalList(cb) {
        this.isLoading = true
        const res = await uni.$http.get('/approval', this.queryObj)
        // this.approvalList = res.data.data.row
        this.approvalList = [...this.approvalList, ...res.data.data.row]
        this.total = res.data.data.total
        cb && cb()
        this.isLoading = false
      },
      getApprovalBytab(list) {
        this.clearStatusData()
        this.setApprovalData(list)
        this.getApprovalList()
      },
      getApprovalBytype(e) {
        this.queryObj.type = e
        // 清空列表数据
        this.approvalList.length = 0
        this.getApprovalList()
      },
      // 清空查询参数及获取列表的数据
      clearStatusData() {
        this.approvalList = []
        this.queryObj.approvalStatus = 2,
          this.queryObj.extensionStatus = '',
          this.queryObj.revokeStatus = ''
      },
      // 下拉刷新重置状态
      onRefresh() {
        this.approvalList = [],
          this.isLoading = true
        this.queryObj.page = 1
        // 重置到第一个tab
        this.$refs.pendingTab.resetToFirstTab();
        this.getApprovalList(() => {
          uni.stopPullDownRefresh()
        })
      },
      setApprovalData(e) {
        Object.keys(e).forEach(key => {
          if (e[key] !== null && e[key] !== undefined && e[key] !== '') {
            this.queryObj[key] = e[key]
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .container {
    background-color: #f6f6f6;
    min-height: 100vh;

    .container-box {
      position: sticky;
      top: 0;
      left: 0;
      z-index: 999;
      background-color: #fff;
      width: 100%;
      box-shadow: 0 2rpx 24rpx rgba(0, 0, 0, 0.05);
    }
  }
</style>